<!DOCTYPE html>
<html>
  <head>
    <title>AR.js A-Frame Location-based</title>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script
      type="text/javascript"
      src="./build/ar-threex-location-only.js"
    ></script>
    <script type="text/javascript" src="./build/aframe-ar.js"></script>
    <style>
      .t {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        color: aliceblue;
      }
    </style>
  </head>
  <body>
    <div class="t"></div>
    <a-scene
      environment="preset: checkerboard"
      vr-mode-ui="enabled: false"
      arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false"
      renderer="antialias: true; alpha: true"
    >
      <a-camera id="camera" gps-new-camera="gpsMinDistance: 5"></a-camera>
      <a-text
        value="This will always face the user."
        scale="20 20 20"
        gps-new-entity-place="latitude:23.041536; longitude:113.208199"
        geometry="primitive:plane"
      ></a-text>

      <a-entity
        material="color: red"
        geometry="primitive: box"
        gps-new-entity-place="latitude:23.035546; longitude:113.207199"
        scale="20 20 20"
        rotation="-90 0 0"
      ></a-entity>
      <!-- <a-entity
        material="color: pink"
        geometry="primitive: box"
        gps-new-entity-place="latitude:23.044533; longitude:113.208007"
        scale="20 20 20"
        rotation="-45 0 0"
      ></a-entity> -->
      <!-- <a-entity
        material="color: pink"
        geometry="primitive: box"
        gps-new-entity-place="latitude:23.044533; longitude:113.208007"
        scale="20 20 20"
        rotation="-45 0 0"
      ></a-entity> -->
      <a-entity
        material="color: green"
        geometry="primitive: box"
        gps-new-entity-place="latitude:23.039546; longitude:113.206199"
        scale="20 20 20"
      ></a-entity>

      <a-entity>
        <a-cylinder
          checkpoint
          radius="0.1"
          height="0.1"
          gps-new-entity-place="latitude:23.039546; longitude:113.206199"
          color="#39BB82"
        ></a-cylinder>
        <a-cylinder
          checkpoint
          radius="0.1"
          height="0.1"
          gps-new-entity-place="latitude:23.039646; longitude:113.206199"
          color="#39BB82"
        ></a-cylinder>
        <a-cylinder
          checkpoint
          radius="0.1"
          height="0.1"
          gps-new-entity-place="latitude:23.039746; longitude:113.206199"
          color="#39BB82"
        ></a-cylinder>
      </a-entity>
    </a-scene>
  </body>
</html>
